/*背景渐变
@start  渐变开始颜色
@end  结束颜色
*/
.bg(@start :#00ffff,@end :#9fffff){
    background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
    background:-moz-linear-gradient(top,@start ,@end);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,
    endColorstr=@end ,grandientType=0);
}

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}


.bgImg(@imgUrl,@rest...){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    background-image: url(@imgUrl);
    background-repeat: no-repeat;
    background-size: @imgW auto;
    width: @imgW;
    height: @imgH;
}
.bgImg(@imgUrl,h){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    position: absolute;
    left: 50%;
    margin-left: -@imgW/2;
}
.bgImg(@imgUrl,v){
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    position: absolute;
    top: 50%;
    margin-top: -@imgH/2;
}
.bgImg(@imgUrl,hv){
    @imgW: unit(image-width(@imgUrl),rem)*@divisorPx;
    @imgH: unit(image-height(@imgUrl),rem)*@divisorPx;
    position: absolute;
    top: 50%;
    margin-top: -@imgH/2;
    left: 50%;
    margin-left: -@imgW/2;
}

.hidden{
    display: none!important;
}

.generate-bg-block(@name,@bgurl,@rest...){
    .@{name} {
        .bgImg(@bgurl);
    }
}

.generate-bg-block(@name,@bgurl,h){
    .@{name} {
        .bgImg(@bgurl,h);
    }
}

.generate-bg-block(@name,@bgurl,v){
    .@{name} {
        .bgImg(@bgurl,v);
    }
}

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}